<template>
  <div class="bottom-wrap">
    <div class="bottom-table-item bottom-table-header">
      <div class="dd" style="width: 15%"></div>
      <div class="dd" style="width: 15%">部门</div>
      <div class="dd" style="width: 15%">金额</div>
      <div class="dd" style="width: 15%">姓名</div>
<!--      <div class="dd" style="width: 10%">类型</div>-->
      <div class="dd" style="width: 40%">时间</div>
      <div class="dd" style="width: 12%">类型</div>
    </div>
    <vue-seamless-scroll :data="tableData" class="seamless-warp"
                         :class-option="defaultOption"
    >
      <div class="bottom-table-wrap">
        <div class="bottom-table-item"
             v-for="(v, index) in tableData"
             :key="index"
        >
          <div class="dd" style="width: 10%">接报</div>
          <div class="dd" style="width: 15%">{{v['receive_station']}}</div>
          <div class="dd" style="width: 15%">{{v['monies']}}</div>
          <div class="dd" style="width: 15%">{{v['person_name']}}</div>
<!--          <div class="dd" style="width: 10%">{{v['111223']}}</div>-->
          <div class="dd" style="width: 40%">{{v['receive_time']}}</div>
          <div class="dd" style="width: 12%">{{v['case_type']}}</div>

        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import API from "@/api/index.api";
    export default {
        components: {
            // commonDialog,
            // commonForm,
          vueSeamlessScroll
        },
        data () {
            return {
              tableData: [
                {
                  "receive_station": "桃浦派出所",
                  "receive_time": "2024-01-31 11:42:27",
                  "case_type": "其他诈骗",
                  "person_name": "曹加佳",
                  "monies": "20000"
                },
                {
                  "receive_station": "桃浦派出所",
                  "receive_time": "2024-01-31 09:22:38",
                  "case_type": "网络信息诈骗",
                  "person_name": "宋芝铭",
                  "monies": "20000"
                },
                {
                  "receive_station": "桃浦派出所",
                  "receive_time": "2024-01-31 09:22:15",
                  "case_type": "其他虚假信息诈骗",
                  "person_name": "李丽华",
                  "monies": "20000"
                },
                {
                  "receive_station": "石泉路派出所",
                  "receive_time": "2024-01-31 08:27:47",
                  "case_type": "电讯信息诈骗",
                  "person_name": "陈海龙",
                  "monies": "20000"
                },
                {
                  "receive_station": "真如派出所",
                  "receive_time": "2024-01-30 22:17:23",
                  "case_type": "其他虚假信息诈骗",
                  "person_name": "周玉华",
                  "monies": "20000"
                },
                {
                  "receive_station": "桃浦派出所",
                  "receive_time": "2024-01-30 21:32:07",
                  "case_type": "网络信息诈骗",
                  "person_name": "王珏",
                  "monies": "20000"
                },
                {
                  "receive_station": "白玉路派出所",
                  "receive_time": "2024-01-30 08:43:15",
                  "case_type": "网络信息诈骗",
                  "person_name": "施惠英",
                  "monies": "20000"
                },
                {
                  "receive_station": "东新路派出所",
                  "receive_time": "2024-01-30 08:12:52",
                  "case_type": "网络信息诈骗",
                  "person_name": "陈婷",
                  "monies": "20000"
                },
                {
                  "receive_station": "宜川新村派出所",
                  "receive_time": "2024-01-29 19:29:16",
                  "case_type": "网络信息诈骗",
                  "person_name": "张美萍",
                  "monies": "20000"
                },
                {
                  "receive_station": "长寿路派出所",
                  "receive_time": "2024-01-29 16:56:29",
                  "case_type": "电讯信息诈骗",
                  "person_name": "邬新媛",
                  "monies": "20000"
                },
                {
                  "receive_station": "白丽路派出所",
                  "receive_time": "2024-01-29 16:37:40",
                  "case_type": "其他诈骗",
                  "person_name": "梁俊",
                  "monies": "20000"
                },
                {
                  "receive_station": "长征派出所",
                  "receive_time": "2024-01-29 15:30:31",
                  "case_type": "其他诈骗",
                  "person_name": "李强强",
                  "monies": "20000"
                },
                {
                  "receive_station": "东新路派出所",
                  "receive_time": "2024-01-29 13:41:32",
                  "case_type": "网络信息诈骗",
                  "person_name": "丁虞旻",
                  "monies": "20000"
                },
                {
                  "receive_station": "桃浦派出所",
                  "receive_time": "2024-01-29 08:25:50",
                  "case_type": "其他虚假信息诈骗",
                  "person_name": "江剑峰",
                  "monies": "20000"
                },
                {
                  "receive_station": "中山北路派出所",
                  "receive_time": "2024-01-28 20:56:43",
                  "case_type": "网络信息诈骗",
                  "person_name": "郭寻梅",
                  "monies": "20000"
                },
                {
                  "receive_station": "中山北路派出所",
                  "receive_time": "2024-01-28 18:45:58",
                  "case_type": "网络信息诈骗",
                  "person_name": "叶笑萍",
                  "monies": "20000"
                },
                {
                  "receive_station": "甘泉路派出所",
                  "receive_time": "2024-01-28 10:28:09",
                  "case_type": "网络信息诈骗",
                  "person_name": "夏思妤",
                  "monies": "20000"
                },
                {
                  "receive_station": "万里派出所",
                  "receive_time": "2024-01-28 00:15:55",
                  "case_type": "网络信息诈骗",
                  "person_name": "刘永锭,刘继勇,卢大超,宋学敏,曹华滚,林鑫,石灵高",
                  "monies": "20000"
                },
                {
                  "receive_station": "石泉路派出所",
                  "receive_time": "2024-01-27 23:14:08",
                  "case_type": "其他虚假信息诈骗",
                  "person_name": "赵志贵",
                  "monies": "20000"
                },
                {
                  "receive_station": "长征派出所",
                  "receive_time": "2024-01-27 21:10:15",
                  "case_type": "其他诈骗",
                  "person_name": "徐振,蔡欢欢",
                  "monies": "20000"
                }
              ],
              defaultOption: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 0, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
              },
              tableHead: [
                    {
                        prop: '111',
                        label: '案件类型'
                    },
                    {
                        prop: '2',
                        label: '涉案金额',
                      width: 90
                    },
                    {
                        prop: '1112233',
                        label: '案件时间',
                        width: 180
                    },
                ]
            }
        },
        methods: {

          getCase_list () {
            API.case_list().then(res=>{

              this.tableData=res.content

            })
          }

        },
        mounted() {
          this.getCase_list()
        }
    }
</script>
<style lang="stylus">
  .bottom-wrap{
    height: 100%;
    position: relative;
    .bottom-table-header{
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: #0d364d;
      display: flex;
      padding: 5px 0;

    }
    .seamless-warp{
      padding-top: 40px;
      height: calc(100% - 40px);
      overflow: hidden;
    }
    .bottom-table-wrap{
      height: 100%;
      .bottom-table-item{
        padding: 10px 0;
        display: flex;
      }
      .bottom-table-item:nth-child(even){
        background: #144066;
      }
    }
    .dd{
      text-align: center;
      color: #b6c3c9 !important;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
